<!-- 后台管理 - 菜单管理 -->
<template>
  <div id="box">
    <div id="menu">
      <div>
        <div style="background-color: #f7f5f9;padding: 10px 20px">
          <el-button
            type="danger"
            size="medium"
            style="margin-bottom:10px;float: right;"
            @click="deldaima(getbase)"
          >删除
          </el-button>
          <el-button
            type="primary"
            size="medium"
            style="margin-right:10px;float: right;"
            @click="updatevalue(getbase)"
          >编辑
          </el-button>
          <el-button
            type="primary"
            size="medium"
            style="margin-bottom:10px;float: right;"
            @click="centerDialogVisibleBase_menu = true"
          ><i
            class="iconfont icon-xinzengshoufeixiangmu"
            style="margin-bottom:10px;float: right;"
          />添加
          </el-button>
        </div>
        <div style="clear: both;" />
        <div style="padding: 20px;background-color: white;">
          <el-table
            highlight-current-row
            :data="menutable"
            border
            style="width: 100%"
            @row-click="getvalue"
          >
            <el-table-column prop="name" label="名称" min-width="180" />
            <el-table-column prop="id" label="编码" min-width="50" align="center" />
            <el-table-column prop="url" label="菜单路由" min-width="300" />
            <el-table-column prop="sort" label="排序" min-width="50px" align="center" />
            <el-table-column prop="typename" label="类型" align="center" />

          </el-table>

        </div>
        <el-dialog
          title="新增代码类别"
          :visible.sync="centerDialogVisibleBase_menu"
          width="40%"
          center
          style="text-align: center;"
          :before-close="closeaddbase"
        >
          <el-form
            ref="addbase"
            :model="send"
            :rules="addbaserules"
            label-width="100px"
            style="width: 100%;border-bottom: 1px solid #F0F0EE;border-top: 1px solid #F0F0EE;"
          >
            <el-form-item label="上级菜单" prop="parentId">
              <el-select
                v-model="send.parentId"
                size="small"
                filterable
                placeholder="请选择"
                style="width: 80%;"
              >
                <el-option
                  v-for="item in menuoption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="菜单名称" prop="name">
              <el-input v-model="send.name" style="width: 80%;" />
            </el-form-item>
            <el-form-item v-if="caidan" label="菜单图标" prop="css">
              <el-button size="medium" style="width: 45%;" @click="icon">请选择菜单图标</el-button>
              <i :class="iname" />{{ iname }}
            </el-form-item>
            <el-form-item label="菜单路由" prop="url">
              <el-input v-model="send.url" style="width: 80%;" />
            </el-form-item>
            <el-form-item label="菜单排序" prop="sort">
              <el-input v-model="send.sort" style="width: 80%;" />
            </el-form-item>
            <el-form-item label="菜单类型" prop="type">
              <el-select v-model="send.type" placeholder="请选择" style="width: 80%;">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="medium" @click="resetForm('addbase')">重置</el-button>
            <el-button size="medium" @click="handleClose('addbase')">取 消</el-button>
            <el-button
              size="medium"
              type="primary"
              @click="add(send,'addbase')"
            >确 定</el-button>
          </span>
        </el-dialog>

        <!--修改基本代码类别对话框-->
        <el-dialog
          v-if="centerDialogVisibleupdateBase_menu"
          title="修改代码类别"
          :visible.sync="centerDialogVisibleupdateBase_menu"
          width="40%"
          center
          style="text-align: center;"
          :before-close="closeupdatebase"
        >
          <el-form
            ref="updatebase"
            :model="getbase"
            :rules="updatebaserules"
            label-width="100px"
            style="width: 100%;border-bottom: 1px solid #F0F0EE;border-top: 1px solid #F0F0EE;"
          >
            <el-form-item label="上级菜单" prop="parentId">
              <el-select v-model="getbase.parentId" filterable placeholder="请选择" style="width: 80%;">
                <el-option
                  v-for="item in menuoption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="菜单名称" prop="name">
              <el-input v-model="getbase.name" style="width: 80%;" />
            </el-form-item>
            <el-form-item v-if="caidan" label="菜单图标" prop="css">
              <i :class="getbase.css">{{ getbase.css }}</i><br>
              <el-button size="medium" style="width: 40%;" @click="icon">请选择更改图标</el-button>
              <br>
              <span>新图标：</span><i :class="iname" style="margin-right: 10px;" />{{ iname }}
            </el-form-item>
            <el-form-item label="菜单路由" prop="url">
              <el-input v-model="getbase.url" style="width: 80%;" />
            </el-form-item>
            <el-form-item label="菜单排序" prop="sort">
              <el-input v-model="getbase.sort" style="width: 80%;" />
            </el-form-item>
            <el-form-item label="菜单类型" prop="type">
              <el-select v-model="getbase.type" placeholder="请选择" style="width: 80%;">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="medium" @click="handleClose('updatebase')">取 消</el-button>
            <el-button
              size="medium	"
              type="primary"
              @click="updatebase(getbase,'updatebase')"
            >确 定</el-button>
          </span>
        </el-dialog>
        <!--删除-->
        <el-dialog
          title="删除基本代码"
          :visible.sync="centerDialogVisibledelete_menu"
          width="30%"
          center
          style=""
        >
          <div style="width: 100%;text-align: center;border-bottom: 1px solid #F0F0EE;border-top: 1px solid #F0F0EE;">
            <div style="padding: 50px 0px;font-size: 16px;">是否删除当前记录</div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button
              size="medium"
              @click="centerDialogVisibledelete_menu = false"
            >取 消</el-button>
            <el-button
              size="medium"
              type="danger"
              @click="del(getbase)"
            >确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import { queryMenusAll, postMenusInsert, putUpdateMenus, postDelMenus } from '@/api/back-management/BG_menu'
export default {
  data() {
    return {
      caidan: false,
      // 菜单管理数据
      menutable: [],
      menu: [],
      // 添加弹窗数据
      centerDialogVisibleBase_menu: false,
      centerDialogVisibleupdateBase_menu: false,
      centerDialogVisibledelete_menu: false,
      send: {
        name: '',
        css: '',
        url: '',
        sort: 100,
        type: '',
        parentId: 0
      },
      addbaserules: {
        parentId: [{
          required: true,
          message: '请选择上级菜单',
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '请输入菜单名称',
          trigger: 'blur'
        }],
        sort: [{
          required: true,
          message: '请输入菜单排序',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '请至少选择一个类型',
          trigger: 'blur'
        }],
        url: [{
          required: false,
          message: '输入 路由地址',
          trigger: 'blur'
        }]
      },

      updatebaserules: {
        name: [{
          required: true,
          message: '请输入菜单名称',
          trigger: 'blur'
        }],
        sort: [{
          required: true,
          message: '请输入菜单排序',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '请至少选择一个类型',
          trigger: 'blur'
        }],
        url: [{
          required: false,
          message: '输入 路由地址',
          trigger: 'blur'
        }]
      },
      menuoption: [{
        id: 0,
        name: '根目录'
      }],
      options: [{
        value: 1,
        label: '系统菜单'
      }, {
        value: 2,
        label: '业务菜单'
      }, {
        value: 0,
        label: '其他菜单'
      }],
      //				i标签数据
      dialogVisiblepermission: false,
      iname: '',
      getbase: []
    }
  },
  created() {
    this.getallmenus()
  },
  methods: {
    // 菜单管理
    // 得到基础菜单数据
    getallmenus() {
      console.log(this.$store.getters.token)
      this.menu = []
      const data = {
        'token': this.$store.getters.token
      }
      queryMenusAll(data).then(res => {
        this.menutable = res
        console.log(this.menutable)
      })
    },

    // 添加对话框方法
    add(send, formname) {
      const that = this
      const data = send
      data.token = this.$store.getters.token
      console.log(data)
      that.$refs[formname].validate((valid) => {
        if (valid) {
          postMenusInsert(data).then(res => {
            if (res.toString().indexOf('云服务接口错误') > -1) {
              if(res.indexOf('用户没有权限添加菜单') > -1){
                this.$message({
                  message: '用户没有权限添加菜单，请联系超级管理员！',
                  type: 'error'
                })
              }else{
                this.$message({
                  message: '添加失败！',
                  type: 'error'
                })
              }
              that.centerDialogVisibleBase_menu = false
              that.send = {
                name: '',
                css: '',
                url: '',
                sort: 100,
                type: '',
                parentId: 0
              }
              that.iname = ''
              that.getallmenus()
            }else{
              this.$message({
                message: '添加菜单成功',
                type: 'success'
              })
              that.getallmenus()
              that.centerDialogVisibleBase_menu = false
              that.send = {
                name: '',
                css: '',
                url: '',
                sort: 100,
                type: '',
                parentId: 0
              }
              that.iname = ''
            }
          })
        } else {
          return false
        }
      })
    },

    // 修改菜单
    getvalue(data) {
      this.getbase = data
    },
    updatevalue(data) {
      if (data.id === undefined) {
        this.$message({
          message: '未选择修改菜单',
          type: 'warning'
        })
      } else {
        this.centerDialogVisibleupdateBase_menu = true
      }
    },
    updatebase(data, formname) {
      data.token = this.$store.getters.token
      this.$refs[formname].validate((valid) => {
        if (valid) {
          const that = this
          putUpdateMenus(data).then(res => {
            if(res.toString().indexOf('云服务接口错误') > -1){
              if(res.indexOf('用户没有权限修改菜单') > -1){
                this.$message({
                  message: '用户没有权限修改菜单，请联系超级管理员！',
                  type: 'error'
                })
              }else {
                this.$message({
                  message: '修改失败！',
                  type: 'error'
                })
              }
              that.getallmenus()
              that.centerDialogVisibleupdateBase_menu = false
            }else {
              this.$message({
                message: '修改菜单成功',
                type: 'success'
              })
              that.getallmenus()
              that.centerDialogVisibleupdateBase_menu = false
            }
          })
        } else {
          return false
        }
      })
    },

    // 选择图标方法
    icon() {
      this.dialogVisiblepermission = true
    },
    choseicon(ev) {
      this.iname = ev.currentTarget.getElementsByTagName('i')[0].className
      this.dialogVisiblepermission = false
      this.send.css = this.iname
    },

    // 删除菜单
    deldaima(getvaluedata) {
      if (getvaluedata.id === undefined) {
        this.$message({
          message: '未选择删除对象',
          type: 'warning'
        })
      } else {
        this.centerDialogVisibledelete_menu = true
      }
    },
    // 删除
    del(getvaluedata) {
      const data = {}
      data.id = getvaluedata.id
      data.token = this.$store.getters.token
      // data = JSON.stringify(data)
      console.log(data)
      const that = this
      postDelMenus(data).then(res => {
        if(res.indexOf('云服务接口错误') > -1){
          if(res.indexOf('用户没有权限删除菜单') > -1){
            this.$message({
              message: '用户没有权限删除菜单，请联系超级管理员！',
              type: 'error'
            })
          }else {
            this.$message({
              message: '删除菜单失败！',
              type: 'error'
            })
          }
          that.centerDialogVisibledelete_menu = false
          that.getallmenus()
        }else{
          this.$message({
            message: '已删除菜单',
            type: 'success'
          })
          that.centerDialogVisibledelete_menu = false
          that.getallmenus()
        }
      })
    },
    // 综合方法
    handleClose(formName) {
      this.iname = ''
      this.centerDialogVisibleupdateBase_menu = false
      this.centerDialogVisibleBase_menu = false
      this.resetForm(formName)
      this.getbase = []
    },
    closeaddbase() {
      this.$nextTick(() => {
        this.handleClose('addbase')
      })
      this.resetForm('addbase')
    },
    closeupdatebase() {
      this.$nextTick(() => {
        this.handleClose('updatebase')
      })
      this.getallmenus()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
    #box {
        background-color: #F2F2F2;
        width: 100%;
        height: 100%;
    }

    .el-table th {
        background-color: #f8f8f9;
        height: 32px;
        padding: 0px;
    }

    .el-table td {
        height: 40px;
        padding: 0px;
    }

</style>
